/*
  学习目标：模拟vue中的插槽 - 作用域插
  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽
 
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <HelloScoped>
          {(list) => {
            return list.map((item) => <h1 key={item}>{item}</h1>);
          }}
        </HelloScoped>
        <HelloScoped>
          {(list) => {
            return (
              <ul>
                {list.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            );
          }}
        </HelloScoped>
      </div>
    );
  }
}

//  匿名插槽
class HelloScoped extends React.Component {
  state = {
    list: [1, 2, 3],
  };

  render() {
    const { children } = this.props;
    const { list } = this.state;

    const result = children(list);
    return <div>{result}</div>;
  }
}
